<template>
  <div>
    <!-- <span class="iconfont icon-zhuye"></span> -->


    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in listsSlides" :key="index">
        <img class="swipe-img" v-lazy="image">
      </van-swipe-item>
    </van-swipe>

    <section class="nav_box">
      <ul>
        <li>
          <a href="">
            <img src="../assets/logo.png" />
            <div class="title">菜单</div>
          </a>
        </li>
        <li>
          <a href="">
            <img src="../assets/logo.png" />
            <div class="title">菜单</div>
          </a>
        </li>
        <li>
          <a href="">
            <img src="../assets/logo.png" />
            <div class="title">菜单</div>
          </a>
        </li>
        <li>
          <a @click="$router.push('/test')">
            <img src="../assets/logo.png" />
            <div class="title">测试</div>
          </a>
        </li>
      </ul>
    </section>

    <section class="home_recom">
      <header><span>热销商品</span></header>
    </section>

    <section class="home_recom_goods">
      <ul>
        <li v-for="item in listsGoods" :key="item.id">

          <goods-items
            :itemId="item.id"
            :image="item.image"
            :title="item.title"
            :price="item.price"
            :quantity="0"
          ></goods-items>



        </li>
      </ul>
    </section>

    <section style="margin-bottom: 60px;">
      <div class="more">没有更多了</div>
    </section>

    <app-nav></app-nav>
  </div>
</template>

<script>
import nav from './nav.vue';
import goodsItems from "@/components/include/goods-items.vue";


import { mapActions, mapGetters } from 'vuex'


export default {
  components: {
    goodsItems: goodsItems,
    appNav: nav
  },
  computed: {
    ...mapGetters(['carList']),
  },
  name: 'home',
  data() {
    return {
      listsGoods: [],
      listsSlides: [],

    };
  },
  
  
  mounted() {
      if (window.location.href.indexOf("?#") < 0) {
        window.location.href = window.location.href.replace("#", "?#");
      }
    },
    
    created() {
      this.test();
    },

 

  methods: {

    test() {
      this.apiPost('/shop.index/home', { cid: 0, nav_cid: 8, last_index: 0, page_size: 10 }).then(res => {
        console.log(res);
        this.listsGoods = res.data.lists;
        this.listsSlides = res.data.slides;
      });
    },
    goGoodsViews(id = 0){
      this.$router.push({
        path: "views_goods",
        query: {
          goods_id: id
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

img.swipe-img {
  width: 100%;
  min-height: 100px;
  box-sizing: border-box;
  display: block;
}


.cart_btn {
  width: 30px;
  height: 30px;
  border: 1px solid black;
  border-radius: 15px;
  text-align: center;
  line-height: 30px;


  i {
    font-size: 15px;
    color: black;
  }
}
.goods_box {
  overflow: hidden;
  background-color: white;
  padding: 20px 15px;
  position: relative;

  border-bottom: 1px solid #c8c9cc;
  .left {
    float: left;
    img {
      width: 80px;
      height: 80px;
    }
  }
  .left2 {
    float: left;
    padding-top: 5px;
    padding-left: 20px;
    .title {
      color: black;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .price {
      color: #ff5500;
      font-weight: bold;
    }
  }
  .right {
    float: right;
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}

.home_recom header {
  margin: 10px 10px;
  line-height: 24px;
  position: relative;
  text-align: center;
  span {
    background-color: #EFEEF3;
    font-size: 15px;
    color: #888;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    display: inline-block;
    padding: 0 15px;
    z-index: 1;
    a {
      color: #fff !important;
    }
  }
}

.home_recom header:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: #dedede;
}
.home_recom header.green span {
  background: #7fb80e;
}
.home_recom header.green:after {
  background: #7fb80e;
}

.nav_box {
  display: none;
  background-color: white;
  ul {
    display: flex;
  }
}

.nav_box ul li {
  flex: 1;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
  height: 80px;
  img {
    width: 50px;
    height: 50px;
  }
  .title {
    font-size: 14px;
    color: #333;
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}



.van-swipe {
  cursor: pointer;
  van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    &:nth-child(even) {
      background-color: #39a9ed;
    }
    &:nth-child(odd) {
      background-color: #66c6f2;
    }
  }
  img {
    width: 100%;
    display: block;
    box-sizing: border-box;
    background-color: #fff;
    pointer-events: none;
  }
}
</style>
